<script>
export default{
  data(){
    return{
      taskList: [
        {taskId: '2024050312230981study', class:{'运动': '#ff0099'}, title:'1学习Vue中的路由,编写代码',createdTime: '2024-05-08 9:00:00', endTime: '2024-05-08 12:00:00',currentRate:100},
      ],
      currentRate: 100,
      date: new Date(),
      anchors:[0,Math.round(0.9*window.innerHeight)],
      height: 0,
      heightXin: 0,
      actions: [
        {'运动': '#ff0099'},
        {'新增': 'none'}
      ],
      shop_color:{},
      inputTask: '',
      show: false,
      choosenItem: '',
      choosenIndex: 0,
      showCalendar: false,
      today: '',
      min_date: new Date(2024,1,1),
      max_date: new Date(2024,12,31),
      currentTime: ['12','00','00'],
      columnsType: ['hour', 'minute', 'second'],
      heightTimePicker: 0
    }
  },
  // mounted(){
  //   let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
  //   this.timer = setInterval(() => {
  //     _this.date = new Date(); // 修改数据date
  //     _this.taskList.forEach(item=>{
  //       var allTime = (new Date(item.endTime)- new Date(item.createdTime))/1000/60/60/24;
  //       var leftTime = (new Date(item.endTime)- new Date())/1000/60/60/24;
  //       item.currentRate = (leftTime/allTime*100).toFixed(2);
  //       console.log(item.currentRate)
  //     })
      
  //   }, 1000)
  // },
  created(){
    // var actions =  [
    //   {'新增': 'none'},
    //   {'运动': '#ff0099'}
    // ]
    // console.log(Object.entries(actions[0])[0])
    
    if(localStorage.getItem('taskList') != null){
      this.taskList = JSON.parse(localStorage.getItem('taskList'))
    }
    if(localStorage.getItem('taskCls') != null){
      this.actions = JSON.parse(localStorage.getItem('taskCls'))
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  computed:{
    text:function(x){
      return x + '%'
    },
  },
  methods:{
    add(){
      this.height=this.anchors[1]
    },
    close(){
      this.height = this.anchors[0];
    },
    del(id){
      var list = this.taskList.splice(id,1)
    },
    addTask(){
      var tempobj = {taskId: '2024050312230987study', class:{"运动": "#ff0099"}, title:'7学习Vue中的路由,编写代码',createdTime: '2024-05-08 9:00:00', endTime: '2024-05-08 12:00:00',currentRate:100}
      tempobj.title = this.inputTask
      tempobj.class = this.shop_color
      this.taskList.push(tempobj)
      this.height = 0
      localStorage.setItem('taskList',JSON.stringify(this.taskList))
    },
    taskInfo(idx){
      if(this.taskList.length == 0 || this.taskList.length <= idx) return;
      this.show = true;
      this.choosenItem = this.taskList[idx];
      this.choosenIndex = idx;
    },
    confirmEdit(){
      console.log(this.shop_color)
      this.choosenItem['class'] = this.shop_color;
      this.taskList[this.idx] = this.choosenItem;
      localStorage.setItem("taskList", JSON.stringify(this.taskList))
      this.show = false;
    },
    cancelEdit(){
      this.show = false;
    },
    editDate(){
      // 1.拿到日期 "2024-05-01"
      var date = this.choosenItem.endTime.split(" ")[0]
      // 2.打开Calendar组件
      this.showCalendar = true;
      // 3.把日期给组件
      var datelist = date.split("-");
      var d = new Date(datelist[0],parseInt(datelist[1])-1,datelist[2])
      // console.log(d)
      this.today = d
    }, 
    confirmCalendar(value){
      // 1.得到新日期
      // date = "2024-01-01"
      var date = `${value.getFullYear()}-${value.getMonth() + 1}-${value.getDate()}`
      // 2.关闭组件
      this.showCalendar = false;
      // 3.日期传进临时数据中choosenItem
      // endTime: '2024-05-08 12:00:00'
      this.choosenItem.endTime = [date,this.choosenItem.endTime.split(" ")[1]].join(" ")
    },
    editTime(){
      // 1.拿到时间 "12:00:00"
      var time = this.choosenItem.endTime.split(" ")[1]
      // 2.打开TimePicker组件
      this.heightTimePicker = this.anchors[1]
      // 3.把时间给组件
      this.currentTime = time.split(":")
    },
    confirmTimePicker(value){
      // 1.得到新时间
      var time = value.selectedValues.join(":")
      // 2.关闭组件
      this.heightTimePicker = 0
      // 3.时间传进临时数据中choosenItem
      this.choosenItem.endTime = [this.choosenItem.endTime.split(" ")[0],time].join(" ")
    },
    chsCls(value){
      // console.log(value);
      this.shop_color = value;
    }
  }
}
</script>

<template>
  <h1 v-if="this.taskList.length == 0" class="empty">创建一个新任务试试吧！</h1>
  <van-swipe-cell v-for="(item,idx) in taskList" :key="item.taskId">
    <template #left>
      <van-button square type="primary" text="任务完成" />
    </template>
    <van-cell :border="false" @click="taskInfo(idx)">
      <template #title>
        <span class="custom-title">{{ item.title }}</span>
        <van-tag type="primary">important</van-tag>
      </template>
      <template #icon>
        <van-icon name="star" :style='"color:"+Object.values(item.class)[0]+";"'/>
      </template>
      
      <template #value>
        <van-circle
            v-model:current-rate="item.currentRate"
            :rate="item.currentRate"
            :clockwise="false"
            :text="item.currentRate+'%'"
          />
      </template>
    </van-cell>
    <template #right>
      <van-button square type="danger" text="删除任务" @click="del(idx)"/>
    </template>
  </van-swipe-cell>

  <van-overlay :show="show" @click="show = false">
    <div class="wrapper" @click.stop>
      <div class="block">
        <div>
          <!-- <input type="text" v-model="Object.keys(choosenItem.class)[0]">
          <input type="text" v-model="Object.values(choosenItem.class)[0]"> -->
          <myPopover @choose-class="chsCls"></myPopover>
          <input type="text" v-model="choosenItem.title">
          <p @click="editDate()">{{ choosenItem.endTime.split(" ")[0] }}</p>
          <p @click="editTime()">{{ choosenItem.endTime.split(" ")[1] }}</p>
        </div>
        <div>
          <van-button type="primary" @click="confirmEdit()">修改</van-button>
          <van-button type="default" @click="cancelEdit()">取消</van-button>
        </div>
      </div>
    </div>
  </van-overlay>
  <van-calendar :default-date="today" :min-date="min_date" :max-date="max_date" v-model:show="showCalendar" @confirm="confirmCalendar" />
  <van-floating-panel v-model:height="heightTimePicker" :anchors="anchors" duration="0.3">
    <van-time-picker
      v-model="currentTime"
      title="选择时间"
      :columns-type="columnsType"
      @confirm="confirmTimePicker"
    />
  </van-floating-panel>

  <!-- 
    actions: [
        {'新增': 'none'},
        {'运动': '#ff0099'}
      ]
    Object.entries(item)[0]
   -->
  <van-floating-panel v-model:height="height" :anchors="anchors" duration="0.3">
    <div class="header">

      <myPopover @choose-class="chsCls"></myPopover>

      <div class="input">
        <input type="text" v-model="inputTask" placeholder="请输入任务"> 
      </div>
      <div class="btn" @click="addTask()">
        <span class="tianjia">添加</span>
      </div>
    </div>
  </van-floating-panel>

  
  <myButton type="primary" class="add" name="plus" @click="add()"></myButton>
</template>


<style>
:root:root{
  --van-circle-size: 45px;
  --van-cell-line-height: 35px;
  --van-circle-text-font-size: 10px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  border: 1px solid red;
  border-radius: 10px;
  background-color: #fff;
}

.add{
  width: var(--van-button-default-height)!important;
  height: var(--van-button-default-height)!important;
  border-radius: 50%!important;
  box-shadow: 0 0 5px gray;
  position: fixed;
  right: 10px;
  bottom: calc(var(--van-tabbar-height) + 10px);
}
.empty{
  font-size: 2em;
  color: rgb(181, 182, 182);
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  top: 40px;
}
.van-popover__wrapper{
  display: block;
}
input[type='color']{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background-color: #fff;
  display: inline-block;
}
.tianjia{
  display: block;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.header{
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgb(186, 186, 186);
  margin: 0 10px;
  padding-bottom: 10px;
}
.cls, .btn, .input{
  height: 30px;
  /* border: 1px solid black; */
}
.cls, .btn{
  flex: 1;
}
.input{
  flex: 5;
}
.custom-title {
    margin-right: 4px;
    vertical-align: middle;
}
.van-cell__title{
  flex: 3;
}
.van-cell__value{
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.van-cell{
  padding: 0 10px;
  margin: 10px 0;
  justify-content: center;
  align-items: center;
}
.cross{
  display: block; 
  position: fixed; 
  top: 20px; 
  right:20px; 
  font-size: 1.3em; 
  color: rgb(103, 103, 103) ;
}
.cross:hover{
  cursor: pointer;
}
.learn{
  color: red;
}
.play{
  color: green;
}

/* .van-col{
  text-align: center;
}
.van-circle{
  width: 50%;
}
.van-swipe-cell__left{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.van-cell__title{
  line-height: 35px;
}
.van-button{
  height: 75.5px;
} */
</style>